import { Component } from 'react';

import { UploadCore, Events, Status, VERSION } from 'uploadcore';
import {DatetimeField,TextField,Toast} from 'saltui';

// const numberFloatRegExp = /^(-?\d+)(\.\d+)?$/;
// const numberRegExp = /^-?\d+$/;
export default class PageHome extends Component {



  constructor(props) {
    super(props);
    this.state={
      value:props.value,
      keyNo:props.keyNo,
      readOnly:props.readOnly,
      required:props.required,
      label:props.label,
      defaultDate: {}
    };
  }

  handleNumberChange(newValue,j,count,type) {
    // let number = '';
   // if(type == 'int'){
   //    let matches = newValue.match(numberRegExp);
   //    if (matches) {
   //      number = matches[0];
   //    }
   // }
   // else if(type=='float'){
   //   let matches = newValue.match(numberFloatRegExp);
   //  if (matches) {
   //    number = matches[0];
   //  }
   // }
   // else{
   //  number = newValue;
   // }
    if(newValue!=null&&newValue!=''){
      if(isEmojiCharacter(newValue)){
        Toast.show({
          type: 'error',
          content: '不能输入表情',
          onHide: function () {}
        });
        return ;
      }
      if(newValue.length>count&&count!=''){
        Toast.show({
          type: 'error',
          content: '最大输入'+count+'个字符',
          onHide: function () {}
        });
        return;
      }
    }
      let t = this;
      //t.props.value[j].value = newValue;
      var propsValue = t.state.value;
      propsValue[j].value = newValue;
      t.setState({
        value: propsValue
      });
      t.props.onChangeFill(t.props.value);
  }
  componentDidMount() {
    let t = this;
    // $('#fillInBlanks_'+this.props.keyNo).on('input propertychange','input', function() {
    //   var count = $(this).val().length;
    //   var no = $(this).data('no');
    //   var value = $(this).val();
    //   t.props.value[no].value = value;
    //   t.props.onChangeFill(t.props.value);
    //  });
    this.state.value.map(function(item,j){
      let optionSetting = JSON.parse(item.optionSetting);
      t.handleNumberChange(item.value,j,optionSetting.blankLength,optionSetting.charType);
    });
  }
  formatterDate(time){
    var date = new Date(time);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = date.getDate() < 10 ? "0" + (date.getDate()) : date.getDate();
    return Y+M+D;
  }
  handleChange(field, j,value) {
    let t = this;
    var time = t.formatterDate(value.value);
      t.props.value[j].value = time;
      t.props.onChangeFill(t.props.value);
    }
  render() {
    const t = this;
    return (
      <div className="dd-ques-title" id={'fillInBlanks_'+this.state.keyNo}>
        {
          this.state.label == null || this.state.label == "" ?"":
            <div className={this.state.required == '1'?"t-group-head  t-radio-field-label  required":"t-group-head  t-radio-field-label"}>{this.state.label}</div>
        }
        <div className="t-BCf">
         { this.state.value?this.state.value.map(function(item,j){
           let optionSetting = JSON.parse(item.optionSetting);
           let charType = optionSetting.charType;
           let optionRequired = optionSetting.optionRequired;
              return (
              <teamplate key={j} style={{display:"inherit"}} >
                {charType=='string' ?
                  <div className="dd-bottom-border t-MB12 t-PR">
                    {
                      optionRequired == '1'?
                      <span className={this.state.readOnly=='1'?'t-FCreadonly dd-required':'dd-required'} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                      :
                      <span className={this.state.readOnly=='1'?'t-FCreadonly':''} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                    }
                    <TextField
                      placeholder='请输入'
                      readOnly={this.state.readOnly=='1'?true:false}
                      value={item.value}
                      onChange={(value) => { t.handleNumberChange(value,j,JSON.parse(item.optionSetting).blankLength,'string') }}
                    />
                  </div>
                :charType=='int'?
                    <div className="dd-bottom-border t-MB12 t-PR">
                      {
                        optionRequired == '1'?
                        <span className={this.state.readOnly=='1'?'t-FCreadonly dd-required':'dd-required'} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                        :
                        <span className={this.state.readOnly=='1'?'t-FCreadonly':''} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                      }
                      <TextField
                        placeholder='请输入整数' 
                        readOnly={this.state.readOnly=='1'?true:false}
                        value={item.value}
                        onChange={(value) => { t.handleNumberChange(value,j,JSON.parse(item.optionSetting).blankLength,'int') }}
                      />
                    </div>
                :charType=='float'?
                      <div className="dd-bottom-border t-MB12 t-PR">
                        {
                          optionRequired == '1'?
                          <span className={this.state.readOnly=='1'?'t-FCreadonly dd-required':'dd-required'} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                          :
                          <span className={this.state.readOnly=='1'?'t-FCreadonly':''} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                        }
                        <TextField
                          placeholder='请输入数字'
                          readOnly={this.state.readOnly=='1'?true:false}
                          value={item.value}
                          onChange={(value) => { t.handleNumberChange(value,j,JSON.parse(item.optionSetting).blankLength,'float')}}
                        />
                      </div>
                :charType=='date'?
                        <div className="dd-bottom-border t-MB12 t-PR">
                          {
                            optionRequired == '1'?
                            <span className={this.state.readOnly=='1'?'t-FCreadonly dd-required':'dd-required'} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                            :
                            <span className={this.state.readOnly=='1'?'t-FCreadonly':''} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                          }
                          <DatetimeField readOnly={this.state.readOnly=='1'?true:false}  placeholder={this.state.readOnly=='1'?"":"请选择日期"} onSelect={t.handleChange.bind(t, 'value3',j)} value={item.value?item.value:null} columns={DatetimeField.YMD} />
                        </div>
                : <div className="dd-bottom-border t-MB12 t-PR">
                    {
                      optionRequired == '1'?
                      <span className={this.state.readOnly=='1'?'t-FCreadonly dd-required':'dd-required'} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                      :
                      <span className={this.state.readOnly=='1'?'t-FCreadonly':''} style={{fontSize:JSON.parse(item.optionSetting).fontSize,fontFamily:JSON.parse(item.optionSetting).fontFamily,wordBreak: "break-all"}}>{item.name}</span>
                    }
                    <TextField
                      placeholder='请输入'
                      readOnly={this.state.readOnly=='1'?true:false}
                      value={item.value}
                      onChange={(value) => { t.handleNumberChange(value,j,999,'string') }}
                    />
                  </div>}
               </teamplate>
            )
          }.bind(this))
          :<teamplate></teamplate>}

        </div>
      </div>

    );
  }
}

